<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改价格</button>
    <button @click="changeCar">修改车</button>
    <hr>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref,reactive} from 'vue';
  // 使用原则
  // 1. 若需要一个基本类型的响应式数据，必须使用ref。
  // 2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
  // 3. 若需要一个响应式对象，且层级较深，推荐使用reactive

  // 数据
  let car = reactive({brand:'小米u7',price:100})  //ref也可以定义对象,因为底层是利用了reactive,在car.value中存放的是一个proxy代理的响应式对象
  let sum = ref(0)
  // 方法
  function changePrice(){
    car.price += 10
  }
  function changeCar(){
    // reactive的一个bug
    // car = {brand:'亚迪',price:10}   //这样写，直接覆盖了之前的响应式对象，变成一个普通对象，页面不更新
    // car = reactive({brand:'亚迪',price:10})  //这样写也不更新
    Object.assign(car,{brand:'亚迪',price:10})   //将后面的对象追加给前面的car,之前的属性值被顶掉了，整体修改只能用这种方式

    // ref可以直接覆盖,但ref必须加.value
    // car = {brand:'亚迪',price:10}
  }
  function changeSum(){
    sum.value += 1
    // sum = ref(9)   //ref不能这样赋值，失效
  }
</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
  ul li{
    font-size: 20px;
  }
</style>